<template>
  <div class="app-container">
   <div style="margin: 20px 0">
     <el-card >
       <div class="title">人才培养概况</div>
       <el-row :gutter="20" class="card-container">
         <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
           <div class=" item-container flex-auto padding-24 color1">
             <div class="sub-title">进修培训比例</div>
             <div class="count">68.5%</div>
             <div class="tips">医院接受其他医院(尤其是对口支援医院、医联体内医院)进修并返回原医院独立工作人数占比</div>
           </div>
         </el-col>
         <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
           <div class=" item-container flex-auto padding-24 color2">
             <div class="sub-title">医师资格考试通过率</div>
             <div class="count">68.5%</div>
             <div class="tips">医院住院医师首次参加医师资格考试通过率</div>
           </div>
         </el-col>
       </el-row>
     </el-card>
     <el-card style="margin: 20px 0;padding-bottom: 20px">
       <div class="title">详细数据</div>
       <el-table :data="tableData"  style="width: 100%;margin-top: 20px">
         <el-table-column  prop="date" label="指标" />
         <el-table-column align="center" prop="outpatientVisits" label="数值" />
       </el-table>
     </el-card>
     <el-card>
       <div class="title">人才培养概况</div>

       <!-- 两列图表 -->
       <el-row :gutter="20">
         <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
           <div style="background-color: #FFFFFF;border-radius: 13px;">
             <EchartsComponent :options="chartOption1" class="flex-auto" style="height: 280px;border-radius: 13px;">

             </EchartsComponent>
           </div>
         </el-col>
         <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
           <div  style="background-color: #FFFFFF;border-radius: 13px;">
             <EchartsComponent :options="chartOption2" class="flex-auto" style="height: 280px;border-radius: 13px;">

             </EchartsComponent>
           </div>
         </el-col>
       </el-row>

     </el-card>
   </div>


  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
const chartOption1 = ref(
    {
      title: {
        text: '进修培训返回比例',
        subtext: '医院同期招收进修总人数：594人',
        top: '0px',
        textStyle: {
          fontSize: 20,
          color: '#333',

        },
        subtextStyle: {
          fontSize: 14,
          color: '#666'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: ['对口支援医院', '医联体内医院', '其他医院'],
      },
      yAxis: {
        type: 'value',
        interval: 10,
        axisLabel: {
          formatter: '{value}%'
        }
      },
      series: [
        {
          name: '返回比例',
          type: 'bar',
          itemStyle: {
            color: function(params) {
              let colorList = ['#5470c6', '#91cc75', '#5470c6'];
              return colorList[params.dataIndex];
            }
          },
          label: {
            show: true,
            position: 'top',
            formatter: '{c}%',
            color: '#000'
          },
          data: [68.5, 72.3, 65.8]
        }
      ]
    }
);

const chartOption2 = ref(
    {
      title: {
        text: '医师资格考试通过人数月度统计',
        textStyle: {
          fontSize: 20,
          color: '#333',

        },
        subtextStyle: {
          fontSize: 14,
          color: '#666'
        }
      },


      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisLabel: {
          interval: 0,
          rotate: 45
        }
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 18,
        interval: 3,
        axisLabel: {
          formatter: '{value}人'
        }
      },
      series: [
        {
          name: '通过人数',
          type: 'line',
          itemStyle: {
            color: '#5470c6'
          },
          areaStyle: {
            color: '#C6D5FC' // 设置阴影颜色为浅蓝色，透明度 0.5
          },
          data: [12, 15, 18, 14, 16, 12, 11, 9, 15, 12, 9, 9]
        }
      ]
    }
);




const tableData = ref([
  {
    date: '2024-01-18',
    outpatientVisits: 2847,
    dischargedPatients: 436,
    surgeries: 189,
    minimallyInvasiveSurgeries: '68.5%',
    level4Surgeries: '12.3%'
  },
  {
    date: '2024-01-17',
    outpatientVisits: 2623,
    dischargedPatients: 446,
    surgeries: 180,
    minimallyInvasiveSurgeries: '65.8%',
    level4Surgeries: '11.9%'
  },
  {
    date: '2024-01-16',
    outpatientVisits: 2789,
    dischargedPatients: 428,
    surgeries: 175,
    minimallyInvasiveSurgeries: '67.2%',
    level4Surgeries: '12.1%'
  }
]);
</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-card {
     border-radius: 13px;
     border: none;
     .title{
       color: #5a5959;
       font-size: 22px;
       font-weight: bold;
       padding:20px 0 0 10px;
    }
     .card-container{
           padding-bottom: 25px;
           padding-right: 10px;
           padding-left: 10px;
           .item-container{
             height: 170px;
             border-radius: 10px;
           }
           .color1{
              color: #0065F4;
             background-color: #EDF6FF;
           }
           .color2{
             color: #00925C;
             background-color: #E8FEF4;
           }
           .sub-title{
              font-weight: bolder;
              letter-spacing: 1px;
           }
           .count{
              font-weight: bolder;
              font-size: 26px;
              padding: 10px 0;
           }
           .tips{
             font-size: 14px;
             color: #5a5959;
           }


     }
     .item-analyze-content{
       padding: 16px 10px;
       .analyze-title {
         font-size: 16px;
         font-weight: bolder;
       }
       .analyze-text{
         font-size: 14px;
         padding-top: 10px;
         padding-left: 22px;
         color: #5a5959;
       }
     }
  }


}
</style>
